<template>
  <!--  数据可视化页面-->
  <div class="board" :class="isControl?'board_project':''">
    <!-- 标题 -->
    <top v-if="isControl" class="wow fadeInDown" name="项目数据可视化"></top>
    <top v-else class="wow fadeInDown" name="边坡安全监测数据可视化"></top>
    <!-- 地图 -->
    <module-map ref="map"></module-map>
    <!-- 筛选模块 -->
    <!-- 筛选模块 -->
    <module-filter
      v-if="!isControl"
      :roadId.sync="roadId"
      :slopeId.sync="slopeId"
      :projectId.sync="projectId"
      :deptTreeId.sync="deptTreeId"
      @changeRoad="changeRoad" >
    </module-filter>
<module-clock></module-clock>
    <!-- 各模块页面加载 ，添加Keep-alive后页面样式会丢失-->
    <!--    <keep-alive>-->
    <router-view class="board_router" style="z-index:999;margin:0 1.15vw;" ref="currentPage" @changeMap="changeMap" @getShopCode='getShopCode'></router-view>
    <!--    </keep-alive>-->
  </div>
</template>

<script>
  import top from "@/components/top/index.vue";
import ModuleFilter from './modules/filter.vue'
  import ModuleClock from './modules/clock.vue'

import ModuleMap from './modules/map.vue'
import {
  borderBox8,
  borderBox13,
  scrollBoard,
  decoration10,
  scrollRankingBoard,
  decoration1,
  decoration3,
  decoration12,
  decoration2,
  decoration7,
  loading
} from '@jiaminghi/data-view'
import Vue from 'vue'
import {actions, store} from "../../monitor/work-point.store";

Vue.use(loading)
Vue.use(borderBox13)
Vue.use(borderBox8)
Vue.use(scrollBoard)
Vue.use(decoration10)
Vue.use(scrollRankingBoard)
Vue.use(decoration1)
Vue.use(decoration3)
Vue.use(decoration2)
Vue.use(decoration12)
Vue.use(decoration7)

export default {
  components: {ModuleMap,  top, ModuleFilter , ModuleClock,
  },
  data() {
    return {
      countWarn: [],
      key: 1,
      // 选择路线
      roadId: '',
      // 选择标段
      deptTreeId: '',
      // 选择边坡
      slopeId: '',
      //  选择项目
      projectId: '',
      //  预警等级
      warningLevel: '',
    }
  },
  computed: {
    projectName() {
      return store.projectInfo.name
    },
    isControl() {
      if (this.$route.params.projectId) {
        return true
      }
      return false
    }
  },
  methods: {
    getShopCode(value) {
      this.warningLevel = ''
      this.warningLevel = value
      this.$refs.map.refresh(this.projectId, this.warningLevel)
    },
    changeRoad() {
      this.$refs.map.refresh(this.projectId, this.warningLevel)
      this.$refs.currentPage.refresh(this.projectId)
    },
    back() {
      this.$router.replace('/')
    },
    // 项目改变
    changeMap(code) {
    }
  },
  mounted() {
    //项目控制台不执行mounted，执行activated
    if (this.$route.query.cityName) {
      this.$refs.map.refresh(this.projectId, this.warningLevel,this.$route.query.cityName)
    }
  }, activated() {
    // 查询项目信息
    const projectId = this.$route.params?.projectId
    this.projectId = projectId
    this.changeRoad()
    if (this.$route.query.cityName) {
      this.$refs.map.refresh(this.projectId, this.warningLevel,this.$route.query.cityName)
    }
    if(projectId){
      actions.queryProjectInfo(projectId)
    }
  }
}
</script>

<style lang="less" scoped>
  //项目控制台
  .board_project {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
  }


  .board {
    position: relative;
    width: 100vw;
    height: 100vh;

    .board_header {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      height: 6.375rem /* 102/16 */;
      background-image: url('./imgs/header.png');
      background-size: 100% 100%;
      text-align: center;
      padding-top: 1.4375rem /* 23/16 */;

      & > em, .el-button {
        font-weight: 600;
        font-size: 2.75rem /* 44/16 */;
        line-height: 3.875rem /* 62/16 */;
        background-image: -webkit-linear-gradient(bottom, rgba(130, 168, 242, 1), rgba(255, 255, 255, 1));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    .board_project_header {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      height: 6.375rem /* 102/16 */;
      background-image: url('./imgs/header.png');
      background-size: 100% 100%;
      text-align: center;

      & > em, .el-button {
        font-weight: 600;
        font-size: 1.75rem;
        line-height: 2.475rem;
        background-image: -webkit-linear-gradient(bottom, rgba(130, 168, 242, 1), rgba(255, 255, 255, 1));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
</style>


<style lang="less">

  .board_page-right-d {
    width: 12.5rem /* 200/16 */;
    height: 3.125rem /* 50/16 */;
    position: absolute;
    right: -.5rem /* 8/16 */;
    top: -1rem /* 16/16 */
  }

  .board_page-left-d {
    width: 12.5rem /* 200/16 */;
    height: 3.125rem /* 50/16 */;
    position: absolute;
    left: -.5rem /* 8/16 */;
    top: -1rem /* 16/16 */
  }

  .davav_p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .color1 {
    color: #3BD5FD;
  }

  .color2 {
    color: #80FABA;
  }

  .color3 {
    color: #2BF8E3;
  }
</style>
